
<template>
  <div class="goods-list">
    <van-sticky>
      <NavBar @left-click-event="goBack" title="分类"></NavBar>
      <van-tabs @click-tab="getGoodsList2" v-model:active="activeName">
        <van-tab v-for="item in navData" :name="item.name" :title="item.name"></van-tab>
      </van-tabs>
    </van-sticky>


    <div>
      <ProductList :list="goodsList"></ProductList>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  categoryNav as categoryNavApi,
  goodsList as goodsListApi
} from '@/api/category'
import NavBar from '../../components/NavBar.vue';
import ProductList from '../../components/ProductList.vue';
const route = useRoute()
const router = useRouter()
const categoryId = ref('')
const navData = ref([])
const goodsList = ref([])
const currentNav = ref({})
let activeName = ref('')
categoryId.value = route.query.id
activeName.value = route.query.name
console.log("activeName====>", activeName.value);
onMounted(async () => {
  const res = await categoryNavApi({ id: categoryId.value })

  currentNav.value = res.currentNav
  navData.value = res.navData
  getGoodsList(categoryId.value)
})

const getGoodsList = async (id) => {
  const res = await goodsListApi({ categoryId: id })
  goodsList.value = res.data
}
const getGoodsList2 = async ({name}) => {
  const id = navData.value.find(item=>item.name==name).id
  const res = await goodsListApi({ categoryId: id })
  goodsList.value = res.data
}

const goBack = () => {
  router.go(-1)
}






</script>
<style lang="scss" scoped>
.goods-list {
  :deep(.van-tabs__line) {
    background: #CEA62A;
    ;
  }
}
</style>